<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图片与文字环绕</title>
		<style>
			p{
				
				
				font-size: 16px;  /* 页面默认文字的大小16px */
				line-height: 20px;  /* 浮动p块元素 内容行内元素 */
				/* 结论: 文本不能浮动 特点: 块包行 */
				
				
			}
			img{
				border: 10px solid red;
				float: left;
			}
		</style>
	</head>
	<body>
		<h1>浮动情景1: 图片与文字环绕</h1>
		<img src="img/1.png" alt="爱丽丝"  width="250px" height="250px"/>
		<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Suscipit nemo doloremque pariatur officiis doloribus veniam et veritatis consequatur quisquam, iure ab officia odio, cupiditate non? Fugiat atque eum laboriosam eaque. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cupiditate, soluta voluptate. Possimus fugiat quidem, vitae nihil suscipit aliquid distinctio voluptatibus? Autem, est praesentium eos delectus repellat necessitatibus nisi asperiores quae? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque ut exercitationem quod eos laborum aut nesciunt debitis animi quas dolorum reprehenderit commodi, vero odio blanditiis nemo necessitatibus neque ab fugit. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit nostrum aperiam rem fugit nemo. Quia sed exercitationem aspernatur voluptas eius, nesciunt autem, veritatis ad voluptatem repudiandae laborum sunt dolor labore! Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur autem, quibusdam cumque minima debitis atque enim exercitationem vel blanditiis totam ducimus, error, voluptate laudantium veniam veritatis nulla aliquid? Nobis, ea.  </p>
	</body>
</html>